<script setup>

import TopBar from "../../components/layout/TopBar.vue";
import SiderMenu from "../../components/layout/SiderMenu.vue";
</script>

<template>
  <div class="basic-layout">
    <a-layout>
      <a-layout-header :style="headerStyle" style="background: white">
        <top-bar></top-bar>
      </a-layout-header>

      <a-layout>
        <a-layout-sider :style="siderStyle" theme="light">
          <sider-menu></sider-menu>
        </a-layout-sider>
        <a-layout-content :style="contentStyle">
          <router-view></router-view>
        </a-layout-content>
      </a-layout>

      <a-layout-footer :style="footerStyle">
        <a href="https://gitee.com/kimidogs" target="_blank">
          Hokbun By Kimi
        </a>
      </a-layout-footer>
    </a-layout>
  </div>
</template>

<style scoped>:root {
  --header-height: 64px;
  --sider-width: 200px;
  --footer-height: 40px;
  --background-color: #fff;
  --text-color: #fff;
  --border-color: #e8e8e8;
}

.basic-layout {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

a-layout {
  flex: 1;
  display: flex;
  flex-direction: column;
}

a-layout-header {
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 1000;
  height: var(--header-height);
  background: var(--background-color);
  border-bottom: 1px solid var(--border-color);
}

a-layout-content {
  margin-top: var(--header-height);
  flex: 1;
  overflow: auto;
  margin-left: var(--sider-width);
  background: var(--background-color);
}

a-layout-footer {
  position: fixed;
  bottom: 0;
  width: 100%;
  text-align: center;
  padding: 10px 0;
  background: var(--background-color);
  z-index: 1000;
  height: var(--footer-height);
  border-top: 1px solid var(--border-color);
}

a-layout-sider {
  position: fixed;
  left: 0;
  top: var(--header-height);
  bottom: var(--footer-height);
  z-index: 1000;
  width: var(--sider-width);
  background: var(--background-color);
  border-right: 1px solid var(--border-color);
}
</style>
